<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-colorP" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">店铺粉丝</block>
		</cu-custom>
		<view class="fans-cont">
			<view class="head" v-if="headShow">
				<view class="head-item">
					<view class="">
						<image :src="thisData[1].headimg" mode=""></image>
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Silver-crown.png" mode=""></image>
					</view>
					<view class="txt">
						<text class="text-cut">{{thisData[1].user_name}}</text>
						<text>消费：{{thisData[1].number}}笔</text>
					</view>
				</view>
				<view class="head-item">
					<view class="">
						<image :src="thisData[0].headimg" mode=""></image>
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Golden-crown.png" mode=""></image>
					</view>
					<view class="txt">
						<text class="text-cut">{{thisData[0].user_name}}</text>
						<text>消费：{{thisData[0].number}}笔</text>
					</view>
				</view>
				<view class="head-item">
					<view class="">
						<image :src="thisData[2].headimg" mode=""></image>
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/Copper-crown.png" mode=""></image>
					</view>
					<view class="txt">
						<text class="text-cut">{{thisData[2].user_name}}</text>
						<text>消费：{{thisData[2].number}}笔</text>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="list-item" v-for="(item,index) in thisData" :key="index" v-if="headShow?(index>2):true">
					<view class="num">{{index+1}}</view>
					<view class="">
						<image :src="item.headimg" mode=""></image>
						<view class="text-cut">{{item.user_name}}</view>
						<view class="">消费：{{item.number}}笔</view>
					</view>
				</view>
			</view>
			<no-content :showType="'data'" v-if='noContentShow' :tips="'暂时还没有粉丝哦~'"></no-content>
			<tui-divider width="60%" :gradual="true" v-if="noMore">没有更多了~</tui-divider>
		</view>
	</view>
</template>

<script>
	import tuiDivider from "./component/divider.vue"
	import noContent from "./component/noContent.vue"
	export default {
		components: {
			tuiDivider,
			noContent
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				page: 1,
				thisData: [],
				lastPage: '',
				noMore: false,
				noContentShow: false,
				headShow: true
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			if (this.page > this.lastPage) {
				this.noMore = true
				return
			}
			this.getData()
		},
		methods: {
			getData() {
				var that = this;
				this.$request({
					url: '/BusinessUser/get_fans',
					data: {
						business_id: uni.getStorageSync('userInfo').business_id,
						page: that.page
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.data.length <= 3) {
								that.headShow = false
							}
							if (res.data.data.pageCount == 1) {
								this.noMore = true
							}
							if (res.data.data.totalNum == 0) {
								this.noContentShow = true
								return 
							}
							that.thisData = that.thisData.concat(res.data.data.data)
							that.page++
							that.lastPage = res.data.data.pageCount
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style scoped>
	.head {
		width: 100%;
		height: 400rpx;
		background-color: #ffffff;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 50rpx;
	}

	.head .head-item {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;
	}

	.head .head-item:nth-child(1)>view:nth-child(1),
	.head .head-item:nth-child(3)>view:nth-child(1) {
		border: solid 6rpx #fff;
		box-shadow: 0 0 10rpx rgba(171, 171, 171, 0.4);
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.head .head-item:nth-child(1)>view:nth-child(1)>image:nth-child(1),
	.head .head-item:nth-child(3)>view:nth-child(1)>image:nth-child(1) {
		width: 155rpx;
		height: 155rpx;
		border-radius: 100%;
	}


	.head .head-item:nth-child(1)>view:nth-child(1)>image:nth-child(2),
	.head .head-item:nth-child(3)>view:nth-child(1)>image:nth-child(2) {
		width: 62rpx;
		height: 57rpx;
		position: absolute;
		top: -40rpx;
		left: -5rpx;
		transform-origin: center center;
		transform: rotate(-30deg)
	}


	.head .head-item:nth-child(2)>view:nth-child(1) {
		border: solid 6rpx #fff;
		box-shadow: 0 0 10rpx rgba(171, 171, 171, 0.4);
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.head .head-item:nth-child(2)>view:nth-child(1)>image:nth-child(1) {
		width: 195rpx;
		height: 195rpx;
		border-radius: 100%;
	}

	.head .head-item:nth-child(2)>view:nth-child(1)>image:nth-child(2) {
		width: 62rpx;
		height: 57rpx;
		position: absolute;
		top: -32rpx;
		left: -5rpx;
		transform-origin: center center;
		transform: rotate(-35deg)
	}

	.txt {
		margin-top: 25rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.txt>text:nth-child(1) {
		font-weight: bold;
		font-size: 30rpx;
		line-height: 36rpx;
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 155rpx;
	}

	.txt>text:nth-child(2) {
		font-size: 24rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-top: 10rpx;
	}

	.list {
		width: 100%;
		padding: 20rpx 24rpx 0;
	}

	.list-item {
		width: 100%;
		height: 115rpx;
		display: flex;
		align-items: center;
	}

	.list-item>view:nth-child(1) {
		font-size: 30rpx;
		line-height: 36rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-right: 20rpx;
		width: 40rpx;
		font-weight: bold;
		text-align: center;
	}

	.list-item>view:nth-child(2) {
		flex: 1;
		height: 115rpx;
		border-bottom: solid 1rpx #efefef;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list-item>view:nth-child(2) image {
		width: 72rpx;
		height: 72rpx;
		margin-right: 20rpx;
		border: solid 4rpx #fff;
		border-radius: 100%;
	}

	.list-item>view:nth-child(2)>view:nth-child(2) {
		flex: 1;
		max-width: 400rpx;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		line-height: 115rpx;
	}

	.list-item>view:nth-child(2)>view:nth-child(3) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}
</style>
<style>
	page {
		background: #f5f5f5;
	}
</style>
